/**
 * 这是手机号码修改
 */

import { Form, Input, Button, Checkbox, Radio } from 'antd';
import styles from './change.less';
import {
  UserOutlined,
  EyeTwoTone,
  EyeInvisibleOutlined,
} from '@ant-design/icons';
import { useState } from 'react';
import http from '@/http/index';
// import {usere} from 'ahooks';
let timmer = null;
export default function IndexPage(props) {
  const [isPassword, setIsPassword] = useState(1);
  const onChange = (val) => {
    setIsPassword(val.target.value);
  };
  const [timeDown, setTimeDown] = useState(0);

  const getCode = () => {
    console.log(timeDown);
    http.get('/users').then((res) => {
      setUser(res.users);
    });
    if (timeDown) {
      return;
    }
    setTimeDown(60);
    timmer = setInterval(() => {
      console.log(timeDown);
      if (timeDown) {
        setTimeDown(timeDown--);
      } else {
        clearInterval(window.timmer);
      }
    }, 1000);
  };

  return (
    <div className={styles.step1}>
      <p className={styles.stepText1}>请填写相关信息以帮助我们验证您的身份</p>
      <div className={styles.radioWrap}>
        <Radio.Group onChange={onChange} value={isPassword}>
          <Radio value={1}>当前绑定手机号+验证码</Radio>
          <Radio value={2}>当前绑定手机号+密码</Radio>
        </Radio.Group>
      </div>

      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        autoComplete="off"
      >
        <Form.Item
          label=""
          name="username"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <div>
            <Input
              size="large"
              className={styles.inputItem}
              prefix={<UserOutlined />}
              placeholder="请输入手机号"
            />
          </div>
        </Form.Item>
        <Form.Item
          name="username"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <div className={styles.inputWrap}>
            <Input
              size="large"
              prefix={<UserOutlined />}
              placeholder="请输入验证码"
            />
            <img
              className={styles.itemCode}
              src="https://img1.baidu.com/it/u=1070984255,945844267&fm=253&fmt=auto&app=138&f=PNG?w=491&h=236"
              alt=""
            />
          </div>
        </Form.Item>

        <Form.Item
          label=""
          name="username"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          {+isPassword === 2 ? (
            <div className={styles.inputWrap}>
              <Input.Password
                size="large"
                placeholder="请输入密码"
                prefix={<UserOutlined />}
                iconRender={(visible) =>
                  visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
                }
              />
            </div>
          ) : (
            <div className={styles.inputWrap}>
              <Input
                size="large"
                placeholder="请输入手机验证码"
                prefix={<UserOutlined />}
                suffix={
                  <div
                    className={`${styles.getCode} ${
                      timeDown && styles.codeDisabled
                    }`}
                    onClick={() => {
                      getCode();
                    }}
                  >
                    {timeDown ? `${timeDown}秒后再次获取` : '获取验证码'}
                  </div>
                }
              />
            </div>
          )}
        </Form.Item>
        <Form.Item>
          <div className={styles.inputWrap}>
            <Button
              type="primary"
              size="large"
              block
              onClick={() => {
                props.setNowStep(1);
              }}
            >
              下一步
            </Button>
          </div>
        </Form.Item>
      </Form>
    </div>
  );
}
